<template>
  <section>
    <SearchBar>
      <SearchBarItem :label="$t('runningTaskList.project')">
        <a-select :placeholder="$t('operation.select')" v-model:value="searchForm.projectId"
                  :select="initHandlers(searchForm.projectId)" allow-clear>
          <a-select-option v-for="item in projects" :key="item.projectId">{{ item.projectName }}</a-select-option>
        </a-select>
      </SearchBarItem>
      <SearchBarItem :label="$t('runningTaskList.mockHandler')">
        <a-select :placeholder="$t('operation.select')" v-model:value="searchForm.handlerId"
                  :disabled="!searchForm.projectId" allow-clear>
          <a-select-option v-for="item in handlers" :key="item.handlerId">{{ item.name }}</a-select-option>
        </a-select>
      </SearchBarItem>
      <SearchBarItem last>
        <a-button class="mr-6" danger type="primary" @click="preBatchUnregister">
          {{ $t('runningTaskList.batchUnregister') }}
        </a-button>
        <a-button type="primary" @click="search">
          <template #icon>
            <search-outlined/>
          </template>
          {{ $t('operation.search') }}
        </a-button>
      </SearchBarItem>
    </SearchBar>
    <a-table
        :columns="columns"
        :row-key="record => record.taskCode"
        :data-source="dataSource"
        :pagination="false"
        :loading="loading"
        @change="handleTableChange"
    >
      <template #headerCell="{ column }">
        <template v-for="(item, index) in columns" :key="index">
          <span v-if="column.dataIndex && column.dataIndex === item.dataIndex">
          {{ $t(column.title) }}
          </span>
        </template>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <a-button class="mr-4" type="primary" size="small" @click="show(record)">
            {{ $t('runningTaskList.taskInfo') }}
          </a-button>
          <a-button class="mr-4" type="primary" size="small" @click="seeLog(record)">
            {{ $t('runningTaskList.seeLog') }}
          </a-button>
          <a-popconfirm
              :title="$t('message.confirm_unregister')"
              :ok-text="$t('operation.confirm')"
              :cancel-text="$t('operation.cancel')"
              placement="left"
              @confirm="unregister(record)"
          >
            <a-button danger size="small">{{ $t('runningTaskList.unregister') }}</a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
    <RunningTaskInfoModal v-model:visible="visible" :form="currentRunningTask" @ok="search"/>
    <UnregisterTaskModal v-model:visible="unregisterVisible" :form="searchForm" :projects="projects"
                         :projectIdHandlerInfoMap="projectIdHandlerInfoMap" :handlers="handlers" @ok="search"/>
  </section>
</template>

<script lang="ts" setup>
import {RunningTask} from '@/store/runningTask'
import RunningTaskInfoModal from './RunningTaskInfoModal.vue'
import UnregisterTaskModal from './BatchUnregisterTaskModal.vue'
import {useRouter} from "vue-router";


const columns = [
  {
    title: 'runningTaskList.taskCode',
    dataIndex: 'taskCode',
  },
  {
    title: 'runningTaskList.taskName',
    dataIndex: 'taskName',
  },
  {
    title: 'runningTaskList.registrationTime',
    dataIndex: 'registrationTime',
  },
  {
    title: 'runningTaskList.remainingTimes',
    dataIndex: 'remainingTimes',
    width: '20%',
  },
  {
    title: 'table.action',
    dataIndex: 'action',
    width: '300px',
  },
]
const searchForm = reactive({
  projectId: void 0,
  handlerId: void 0,
})

const handleTableChange = () => {
  search()
}

const dataSource = ref([])

const search = async () => {
  const res = await request.post('/api/dynamic-mock/mock/task/running/query', {...searchForm})
  dataSource.value = res.data?.data
}

const unregister = async (runningTask: RunningTask) => {

  const unregisterParam = {
    unregisterType: 1,
    handlerId: runningTask.handlerId,
    taskCode: runningTask.taskCode,
    interrupt: false
  }

  await request.post('/api/dynamic-mock/mock/task/running/unregister', unregisterParam)
  search()
}
const router = useRouter();
const seeLog = ((record) => {
  const to = router.resolve({
    name: "task-log2",
    params:{taskCode:record.taskCode}
  });
  window.open(to.href, "_blank");
})

const projects = ref([])
const queryProjects = async () => {
  const res = await request.post('/api/dynamic-mock/project/queryOwnAll', {})
  projects.value = res.data?.data
}
queryProjects()

const projectIdHandlerInfoMap = ref({})
const queryProjectIdHandlerInfoMap = async () => {
  const res = await request.post('/api/dynamic-mock/mock/handler/queryOwn', {})
  projectIdHandlerInfoMap.value = res.data?.data.projectHandlerMap
}

queryProjectIdHandlerInfoMap()

const handlers = ref([])

const initHandlers = (projectId) => {
  handlers.value = projectIdHandlerInfoMap.value[projectId]
  searchForm.handlerId = null
}

const visible = ref(false)
const currentRunningTask = ref()

const show = (task: RunningTask) => {
  currentRunningTask.value = toRaw(task)
  visible.value = true
}

const unregisterVisible = ref(false)
const preBatchUnregister = () => {
  unregisterVisible.value = true
}

search()

</script>

<style></style>
